<template>
	<view class="select-supervisor">
		<navBar :title="personType === 'jkzb' ? '监控室值班人员' : '现场带班负责人'" @goBack="uni.navigateBack()"></navBar>

		<scroll-view @scrolltolower="scrolltolower" scroll-y
			:style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}">
			<view style="height: 100%;">
				<view class="search">
					<u-search @search="confirmSearch" @change="confirmSearch" v-model="searchForm.keyWord"
						placeholder="请输入关键字" :showAction="false" clearabled height="88upx" />
				</view>
				<u-radio-group v-model="watchmanId" placement="column" v-if="personType === 'jkzb'">
					<view class="select-supervisor-list">
						<view v-for="(item, index) in supervisorArray" :key="index">
							<view class="list-item">
								<view>{{item.name}} {{item.phone}}</view>
								<u-radio size="22" shape="circle" :name="item.id" @change="radioChange(item)"></u-radio>
							</view>
						</view>
					</view>
				</u-radio-group>
				<!-- 现场带班负责人多选 -->
				<checkbox-group v-else>
					<view class="special-work-personnel-list">
						<view v-for="(item, index) in supervisorArray" :key="index">
							<view class="list-item">
								<view style="display: flex; align-items: center;" class="wid-320">
									<view style="max-width: 65%; box-sizing: border-box; padding-right: 18upx;">
										{{item.name}} {{item.phone}}
									</view>
								</view>
								<checkbox @click="changeCheckBox(item)"
									:checked="currentSelectedArray.includes(item.id.toString())"
									:value="item.id.toString() || ''" activeBackgroundColor="#2979ff" class="checkbox">
								</checkbox>
							</view>
						</view>
					</view>
				</checkbox-group>

				<view class="footer-button">
					<view class="button-placeholder"></view>
					<view class="button-group">
						<view @click="clickConfirmBtn" :loading="isLoading" class="button-primary">确定</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getSystemHeightInfo
	} from "@/utils/common.js";
	import {
		getSafetySupervisorList
	} from "@/api/engineeringMaintenance/engineeringMaintenance.js";
	import {
		standardDataList,
		personGetListByOrgId
	} from "@/api/comprehensive/comprehensive.js";

	export default {
		name: "select-supervisor",
		data() {
			return {
				// 当前页面的类型 - 0: 综合大修下的  1: 工程维保下的
				type: 0,
				// 容器之外的高度
				containerOutsideHeight: 0,
				// 监管人员列表
				supervisorArray: [],
				// 分页器
				paging: {
					pageNum: 1,
					pageSize: 20,
					total: 0,
				},
				// 搜索表单
				searchForm: {
					keyWord: "",
				},
				// 是否正在加载中
				isLoading: false,
				// 当前选择的安全监管人员列表
				currentSupervisorArray: [],
				// 标准数据id列表
				standardDataIds: [],
				// 项目id
				projectId: 0,
				personType: undefined, //人员类型
				type:undefined,
				watchmanId: '',
				selectedPerson: {},
				orgId: undefined,
				currentSelectedArray:[]
			}
		},
		computed: {
			...mapGetters(['dictMap'])
		},
		async onLoad(options) {
			this.personType = options.personType
			this.type = options.type
			console.log(this.type, typeof this.type, 'aaa')
			this.orgId = parseInt(options.orgId);
			this.initContainerData();
			await this.getStandardList();
			this.supervisorArray = await this.getSafetySupervisorArray();

			// 判断是否回显
			if (uni.getStorageSync("_temp_select_supervisor")) {
				this.watchmanId = uni.getStorageSync("_temp_select_supervisor").id;
				this.selectedPerson = uni.getStorageSync("_temp_select_supervisor")
				uni.removeStorageSync("_temp_select_supervisor");
			}
			if (uni.getStorageSync("_temp_select_onSiteShiftLeaderName")) {
				this.currentSelectedArray = uni.getStorageSync("_temp_select_onSiteShiftLeaderName").map(
					item => item.id.toString());
				this.tempSelectedArr = uni.getStorageSync("_temp_select_onSiteShiftLeaderName")
				uni.removeStorageSync("_temp_select_onSiteShiftLeaderName");
			}
		},
		methods: {
			radioChange(val) {
				this.selectedPerson = val
			},
			/** 初始化容器数据 */
			initContainerData() {
				const {
					stateHeight,
					bottomHeight,
					navbarHeight
				} = getSystemHeightInfo();

				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight;
			},

			/** 获取标准数据 */
			getStandardList() {
				return new Promise(resolve => {
					standardDataList({
						currPage: 1,
						pageSize: 99999,
						projectId: null,
						params: {
							type: "engineering_structure",
							treeLevel: 1
						},
					}).then(res => {
						const {
							list
						} = res.result;

						this.standardDataIds = [list.filter(item => item.treeLevel === 1).find(item => item
							.code === (this.type == 1 ? "gcwb" : "zhzzdx")).id];
						resolve();
					});
				});
			},

			/** 获取人员列表信息 */
			getSafetySupervisorArray() {
				return new Promise(resolve => {
					const {
						pageNum,
						pageSize
					} = this.paging;

					let data = {};
					let typeIds = this.dictMap['person_type'].filter(item => ['zc', 'lwpq', 'rsdl'].includes(item
						.groupCode)).map(item => item.id).join(',')
					let resq = {
						currPage: pageNum,
						pageSize,
						projectId: null,
						params: {
							orgId: this.orgId,
							standardDataIds: this.personType === 'jkzb' ? undefined : this.standardDataIds,
							stationTypeIds: [102, 104],
							name: this.searchForm.keyWord,
							personType: this.personType === 'jkzb' ? 'employee_type_manager' :undefined ,
							...data,
						},
					}
					personGetListByOrgId(resq).then(res => {
						const {
							list,
							total
						} = res.result;

						this.paging.total = total;
						resolve(list);
					});
				});
			},

			/** 容器滚动到底部 */
			async scrolltolower() {
				// 判断是否有下一页
				if (!this.isLoading && this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					// 加载...
					this.isLoading = true;
					this.paging.pageNum++;
					this.supervisorArray = this.supervisorArray.concat(await this.getSafetySupervisorArray());
					this.isLoading = false;
				}
			},

			/** 点击确认按钮 */
			clickConfirmBtn() {
				if (this.personType === 'jkzb') {
					uni.setStorageSync("_temp_select_supervisor", this.selectedPerson);
				}
				if (this.personType === 'xcdb') {
					// uni.setStorageSync("_temp_select_onSiteShiftLeaderName", this.selectedPerson);
					if (Array.isArray(this.tempSelectedArr)) {
						uni.setStorageSync("_temp_select_onSiteShiftLeaderName", this.currentSelectedArray
							.map(item => this.tempSelectedArr.find(item1 => Number(item) === Number(item1
								.id))));
					}
				}
				uni.navigateBack();
			},

			/** 确认搜索 */
			async confirmSearch() {
				this.paging.pageNum = 1;
				this.supervisorArray = await this.getSafetySupervisorArray();
			},
			changeCheckBox(data) {
				const index = this.currentSelectedArray.findIndex(item => Number(item) === Number(data.id))
				if (index !== -1) {
					this.currentSelectedArray.splice(index, 1)
				} else {
					this.currentSelectedArray.push(data.id.toString())
				}
				// 记录
				if (!this.tempSelectedArr) {
					this.tempSelectedArr = [data]
				} else if (!this.tempSelectedArr.find(item => Number(item.id) === Number(data.id))) {
					this.tempSelectedArr.push(data)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-supervisor {
		font-size: 32upx;
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;

		/* #endif */
		.search {
			padding: 42upx 36upx 14upx 28upx;
			position: sticky;
			top: 0px;
			border-top: 1px solid #fff;
			background: #fff;
			z-index: 1;
		}

		.u-checkbox-group {
			display: block;
		}
		.checkbox {
			::v-deep .uni-checkbox-input {
				border-radius: 50%;
			}
		}

		.select-supervisor-list {
			padding: 0 36upx 0 28upx;
			color: #445469;
			font-weight: 500;
			width: 100%;

			.list-item {

				padding: 40upx;
				border-bottom: 1px solid #e2e5ed;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			::v-deep .u-radio-group {
				flex: initial;

				.u-radio__icon-wrap {
					margin-right: 0;
				}
			}
		}
	}
	.special-work-personnel-list {
		padding: 0 36upx 0 28upx;
		color: #445469;
		font-weight: 500;
	
		.list-item {
			/* #ifdef APP-PLUS || H5 */
			padding: 40upx 18upx 34upx 28upx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding: 42upx 36upx 14upx 28upx;
			/* #endif */
			border-bottom: 1px solid #e2e5ed;
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.wid-320 {
				/* #ifdef APP-PLUS || H5 */
				width: calc(100% - 44upx);
				/* #endif */
	
				/* #ifdef MP-WEIXIN */
				width: 640rpx;
				/* #endif */
			}
		}
	
		::v-deep .u-radio-group {
			flex: initial;
	
			.u-radio__icon-wrap {
				margin-right: 0;
			}
		}
	}

	.footer-button {
		height: 154upx;

		.button-placeholder {
			height: 100%;
		}

		.button-group {
			height: 154upx;
			padding: 30upx;
			box-sizing: border-box;
			background: #fff;
			position: fixed;
			width: 100vw;
			bottom: 0;
			z-index: 1;

			.button-primary {
				background: #2f80ed;
				border-radius: 4upx;
				color: #fff;
				font-weight: bold;
				line-height: 92upx;
				text-align: center;
			}
		}
	}
</style>